<template>
	<div class="bottom-bar">
		<div class="bar-item bar-left"> 
			<div>
				<i class="iconfont icon-kefu service"></i>
				<span class="text">客服</span>
			</div>
			<div>
				<i class="iconfont icon-dianpu shop"></i>
				<span class="text">店铺</span>
			</div>
			<div>
				<i class="iconfont icon-shoucang"></i>
				<span class="text">收藏</span>
			</div>
		</div>
		<div class="bar-item bar-right">
			<div 
				class="cart"
				@click="sendToCart"
			>加入购物车</div>
			<div class="buy">购买</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'DetailTabBar',
		props:{
			toCart:Object
		},
		methods:{
			sendToCart(){
				this.$store.commit('addCart',this.toCart);
			}
		}
	}
</script>

<style scoped>
	.bottom-bar{
		display: flex;
		text-align: center;
		position: relative;
		left: 0;
		right: 0;
		bottom:58px;
		width: 100vw;
		height: 58px;
		background: #fff;
		z-index:99;
	}
	.bar-item {
		flex:1;
		display: flex;
	}
	.bar-item>div{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex:1;
	}
	.bar-left .text{
		font-size: 0.346666rem;
		padding-top: 6px;
	}
	.bar-left .icon {
		display: block;
		width: 22px;
		height: 22px;
	}
	.bar-right {
		font-size: 15px;
		color: #fff;
		line-height: 58px;
	}
	.bar-right .cart {
		background-color: #ffe817;
		color: #333;
	}
	.bar-right .buy {
		background-color: #f69;
	}
</style>
